<template>
  <div class="stepitem">
    <link rel="stylesheet" href="/static/css/component/duoziju/create_bat.css" />
    <!--分层设置-->
    <div class="checkboxitem">
      <label>环节设置</label>
      <ul class="checkbox">
        <li class="selected" style="opacity:0.6">标注环节</li>
        <li
          @click="edit == false && checktype()"
          :class="{'selected':checkStatus==true}"
        >检查环节</li>
        <li
          @click="edit == false && testtype()"
          :class="{'selected':testStatus==true}"
        >质检环节</li>
      </ul>
    </div>
    <!--检查环节的设置-->
    <div class="checkhide" v-show="checkStatus">
      <div class="hideline">
        <label>检查数据类型</label>
        <div class="typeli">
          <span @click="changeCType(1)" :class="{'hover':checkType==1}">所有数据</span>
          <span @click="changeCType(2)" :class="{'hover':checkType==2}">好数据</span>
          <span @click="changeCType(3)" :class="{'hover':checkType==3}">坏数据</span>
        </div>
      </div>
      <div class="hideline">
        <label>检查比例设置</label>
        <div class="typeli">
          <input type="number" v-model="checkVal" />
          <i>(%百分比,最低比例不可为0)</i>
        </div>
      </div>
    </div>
    <!--质检环节的设置-->
    <div class="checkhide" v-show="testStatus">
      <div class="hideline">
        <label>质检数据类型</label>
        <div class="typeli">
          <span @click="changeTType(1)" :class="{'hover':testType==1}">所有数据</span>
          <span @click="changeTType(2)" :class="{'hover':testType==2}">好数据</span>
          <span @click="changeTType(3)" :class="{'hover':testType==3}">坏数据</span>
        </div>
      </div>
      <div class="hideline">
        <label>质检比例设置</label>
        <div class="typeli">
          <input type="number" v-model="testVal" />
          <i>(%百分比,最低比例不可为0)</i>
        </div>
      </div>
    </div>
    <div class="title">数据导入</div>
    <div class="radioitem">
      <label>数据导入</label>
      <ul class="radio">
        <li
          :type="edit==true?'cursor':''"
          @click="edit==false && selectImpType(0)"
          :class="{'selected':importType==0}"
        >云盘导入</li>
      </ul>
    </div>
    <div class="tb-lt" v-show="myrid!=''">
      <div class="btn-lf" style="display:none">
        <a @click="edit==false && deleteMyrid()">全部删除</a>
      </div>
      <dl class="file">
        <dt>
          <ul>
            <li>文件名称</li>
            <li>操作</li>
          </ul>
        </dt>
        <dd>
          <ul>
            <li>{{selectFileName}}</li>
            <li>
              <a :type="edit==true?'cursor':''" @click="edit==false && deleteMyrid()">删除</a>
            </li>
          </ul>
        </dd>
      </dl>
    </div>

    <div class="pop" v-show="importBox">
      <div class="layer"></div>
      <div class="show_pop bdradius">
        <div class="poptitle">
          <i @click="cancel"></i>
          <span class="fs14_bold">云盘导入</span>
        </div>
        <div class="myloc">
          <a @click="locBakTree()">根目录&gt;</a>
          <a
            v-for="(item,index) in selectTree"
            class="ainimate"
            @click="locBakTree(index+1,item.rid,item.name)"
            :key="item+item.rid"
          >{{item.name}}&gt;</a>
        </div>
        <div class="tree">
          <ul>
            <li v-for="item in fileList" :class="{'current':selectFileRid==item.rid}" :key="item+item.rid">
              <i v-show="item.type!='file'" @click="changefile(item.rid,item.name,item.type)"></i>
              <div class="father" @click="openTree(item.rid,item.name)">
                <em style="display:none"></em>
                {{item.name}}
              </div>
            </li>
          </ul>
        </div>
        <div class="btngroup">
          <a class="yes" @click="saveTree">确定</a>
          <a class="last" @click="cancel">取消</a>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "BaseSetting",
  data() {
    return {
      edit:false,
      tagInfo: {
        //标签添加框
        cname: "",
        ename: ""
      },
      info: {
        languageType: "", // 语言类型
        languageList: []
      },
      tagBox: false, //标签添加框是否显示
      layerBox: true, //分层设置是否显示
      layerstatus1: true, //内容层
      layerstatus2: true, //拼音层
      layerstatus3: true, //标签层
      importType: 3, //数据导入方式
      importBox: false,
      importStatus: true, //是否允许继续打开目录
      fileList: [],
      myrid: "", //需要提交的rid
      selectTree: [],
      selectFileRid: "",
      selectFileName: "",
      chooseType: 1, //选择标签类型
      checkedReg: false, //是否开启规整层
      checkStatus: false, //是否检查
      checkType: 1, //检查数据类型
      checkVal: 100, //检查比例
      testStatus: false, //是否质检
      testType: 1, //质检数据类型
      testVal: 100, //质检比例
      exchangeStatus: true, //是否积分换算
      exchangeVal: 1, //积分换算比例
      textareaStatus: 0, //0:未超限，1:超限 显示原因
      textareaValue: ""
    };
  },
  props:['editBaseData'],
  created(){
    if(this.editBaseData){
      this.info.languageType=this.editBaseData.info.languageType;
      this.tagBox=this.editBaseData.tagBox;
      this.layerBox=this.editBaseData.layerBox;
      this.layerstatus1=this.editBaseData.layerstatus1;
      this.layerstatus2=this.editBaseData.layerstatus2;
      this.layerstatus3=this.editBaseData.layerstatus3;
      this.importType=this.editBaseData.importType;
      this.importBox=this.editBaseData.importBox;
      this.importStatus=this.editBaseData.importStatus;
      this.myrid=this.editBaseData.myrid;
      this.selectFileRid=this.editBaseData.selectFileRid;
      this.selectFileName=this.editBaseData.selectFileName;
      this.chooseType=this.editBaseData.chooseType;
      this.checkedReg=this.editBaseData.checkedReg;
      this.checkStatus=this.editBaseData.checkStatus;
      this.checkType=this.editBaseData.checkType;
      this.checkVal=this.editBaseData.checkVal;
      this.testStatus=this.editBaseData.testStatus;
      this.testType=this.editBaseData.testType;
      this.testVal=this.editBaseData.testVal;
      this.exchangeStatus=this.editBaseData.exchangeStatus;
      this.exchangeVal=this.editBaseData.exchangeVal;
      this.textareaStatus=this.editBaseData.textareaStatus;
      this.textareaValue=this.editBaseData.textareaValue;
    }
  },
  methods: {
    checktype: function() {
      this.checkStatus = !this.checkStatus;
    },
    testtype: function() {
      this.testStatus = !this.testStatus;
    },
    //检查质检设置
    changeCS: function(flag) {
      this.checkStatus = flag;
      this.changecoe("mark");
      this.changecoe("check");
    },
    changeTS: function(flag) {
      this.testStatus = flag;
    },
    changeEC: function(flag) {
      this.exchangeStatus = flag;
      if (!flag) {
        this.exchangeVal = 1;
      }
    },
    changeCType: function(n) {
      this.checkType = n;
    },
    changeTType: function(n) {
      this.testType = n;
    },

    addTag: function(key) {
      this.tagBox = true;
      this.curKey = key;
      // console.log(this.tagListArr)
    },
    cancel: function() {
      this.tagBox = false;
      this.importBox = false;
      this.tagInfo.cname = "";
      this.tagInfo.ename = "";
    },
    deleteMyrid: function() {
      this.myrid = "";
    },
    monitor: function(e) {
      var ev = e.currentTarget;
      if ($(ev).hasClass("err")) {
        $(ev)
          .removeClass("err")
          .addClass("yes");
      }
      $(ev)
        .next(".error")
        .remove();
    },
    save: function() {
      var reg = /^[A-Za-z0-9\-\u4e00-\u9fa5]+$/;
      if (this.tagInfo.cname == "") {
        if (!$("input[name=cname]").hasClass("err")) {
          $("input[name=cname]")
            .removeClass("yes")
            .addClass("err")
            .after("<div class='error'>中文名称不能为空</div>");
        }
        return;
      } else if (
        this.tagInfo.cname.length > 50 ||
        this.tagInfo.cname.length < 1
      ) {
        if (!$("input[name=cname]").hasClass("err")) {
          $("input[name=cname]")
            .removeClass("yes")
            .addClass("err")
            .after("<div class='error'>中文名称不能超过50个字符</div>");
        }
        return;
      } else if (!reg.test(this.tagInfo.cname)) {
        if (!$("input[name=cname]").hasClass("err")) {
          $("input[name=cname]")
            .removeClass("yes")
            .addClass("err")
            .after("<div class='error'>只支持中英文、数字和-</div>");
        }
        return;
      } else if (this.tagInfo.ename == "") {
        if (!$("input[name=ename]").hasClass("err")) {
          $("input[name=ename]")
            .removeClass("yes")
            .addClass("err")
            .after("<div class='error'>英文名称不能为空</div>");
        }
        return;
      } else if (
        this.tagInfo.ename.length > 50 ||
        this.tagInfo.ename.length < 1
      ) {
        if (!$("input[name=ename]").hasClass("err")) {
          $("input[name=ename]")
            .removeClass("yes")
            .addClass("err")
            .after("<div class='error'>英文名称不能超过50个字符</div>");
        }
        return;
      } else if (!reg.test(this.tagInfo.ename)) {
        if (!$("input[name=ename]").hasClass("err")) {
          $("input[name=ename]")
            .removeClass("yes")
            .addClass("err")
            .after("<div class='error'>只支持中英文、数字和-</div>");
        }
        return;
      } else {
        var flag = true,
          mytag = 0,
          label = this[this.curType].label;
        for (var i = 0; i < label.length; i++) {
          var taglist = label;
          if (taglist[i].cname == this.tagInfo.cname) {
            flag = false;
            mytag = 1;
            break;
          }
          if (taglist[i].ename == this.tagInfo.ename) {
            flag = false;
            mytag = 2;
            break;
          }
        }
        if (flag) {
          var newdata = new Object();
          newdata.cname = this.tagInfo.cname;
          newdata.ename = this.tagInfo.ename;
          label.push(newdata);
          this.tagBox = false;
          this.tagInfo.cname = "";
          this.tagInfo.ename = "";
        } else {
          if (mytag == 1) {
            if (!$("input[name=cname]").hasClass("err")) {
              $("input[name=cname]")
                .removeClass("yes")
                .addClass("err")
                .after("<div class='error'>当前属性已存在</div>");
            }
            return;
          } else {
            if (!$("input[name=ename]").hasClass("err")) {
              $("input[name=ename]")
                .removeClass("yes")
                .addClass("err")
                .after("<div class='error'>当前属性已存在</div>");
            }
            return;
          }
        }
      }
    },
    deleteTag: function(key, n) {
      var label = [];
      for (var i = 0; i < this.tagListArr.length; i++) {
        if (this.tagListArr[i].key == key) {
          label = this.tagListArr[i].value;
        }
      }
      label.splice(n, 1);
    },
    checkReg: function() {
      this.checkedReg = !this.checkedReg;
    },
    locBakTree: function(index, rid) {
      if (index == "" || index == undefined || index == null) {
        this.selectTree = [];
        this.myrid = "";
        this.getFileTree("", "css");
      } else {
        this.selectTree.splice(index, this.selectTree.length);
        this.myrid = rid;
        this.getFileTree(rid, "css");
      }
    },
    openTree: function(rid, name) {
      this.getFileTree(rid, "css", name);
    },
    changefile: function(rid, name, type) {
      if (type != "file") {
        this.selectFileRid = rid;
        this.selectFileName = name;
      } else {
        //音频文件不可选，只能选文件夹
      }
    },
    getFileTree: function(path, type, name) {
      var self = this;
      var proxyurl = "";
      if (path == "") {
        proxyurl = "/v1/be/common/files?path=&type=" + type + "&fileType=0";
      } else {
        proxyurl =
          '/v1/be/common/files?path={"rid":"' +
          path +
          '"}&type=' +
          type +
          "&fileType=0";
      }
      if (this.importStatus) {
        this.importStatus = false;

        self.$api
          .method(proxyurl, "", "GET")
          .then(data => {
            if (data.rt.status == 200) {
              self.importStatus = true;
              if (data.data.length != 0) {
                self.fileList = data.data;
                if (name != "" && name != null && name != undefined) {
                  var newdata = new Object();
                  newdata.rid = path;
                  newdata.name = name;
                  self.selectTree.push(newdata);
                  self.myrid = "";
                }
              } else {
                this.$message("当前目录没有可打开的文件");
              }
            } else {
              this.$message(data.data);
            }
          })
          .catch(err => {
            console.log(err);
          });
      }
    },
    saveTree: function() {
      if (this.selectFileRid != "") {
        this.myrid = this.selectFileRid;
        this.importBox = false;
        this.selectTree = [];
        this.selectFileRid = "";
      } else {
        console.log("没选择云盘");
      }
    },
    selectImpType: function(n) {
      this.importType = n;
      if (n == 0) {
        this.importBox = true;
        this.getFileTree("", "css");
      } else {
        this.importBox = false;
      }
    },
    selectlayer: function(flag) {
      this.layerBox = flag;
    },
    layer1: function() {
      if (this.layerstatus1) {
        this.layerstatus1 = false;
      } else {
        this.layerstatus1 = true;
      }
    },
    layer2: function() {
      if (this.layerstatus2) {
        this.layerstatus2 = false;
      } else {
        this.layerstatus2 = true;
      }
    },
    layer3: function() {
      if (this.layerstatus3) {
        this.layerstatus3 = false;
        this.tagListArr = [];
      } else {
        this.layerstatus3 = true;
      }
    },
    GetQueryString: function(name) {
      //流转任务时获取batchid
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
      var r = window.location.search.substr(1).match(reg);
      if (r != null) return unescape(r[2]);
      return null;
    },
    closeResult() {
      window.location.href = "/manager/index/batch";
    }
  },
  mounted: function() {
    var self = this;
    var url = "/v1/dictionary/dicNameList";
    if(this.GetQueryString("edit")){
      this.edit = this.GetQueryString("edit");
    }

    self.$api
      .method(url, "", "GET")
      .then(data => {
        if (data.rt.status == 200) {
          self.info.languageList = data.data;
          if (self.edit == false) {
            self.info.languageType = self.info.languageList[0].key;
          }
        } else {
          this.$message(data.data);
        }
      })
      .catch(err => {
        console.log(err);
      });
  }
};
</script>